import React, { useState } from "react";
import { Alert, ConfigProvider, DatePicker, message } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';


dayjs.locale('zh-cn');


const TableForm = () =>{
    const [date, setDate] = useState(null)
    const [messageApi, contextHolder] = message.useMessage();
    const handleChange = (value) => {
        messageApi.success(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`)
        setDate(value)
    };
    return(
        <ConfigProvider locale={zhCN}>
            <div style={{width:400, margin: '100px auto'}}>
                <DatePicker onChange={handleChange} />
                <div style={{ marginTop: 16}}>
                当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
                {/* 换行 */}
                <br /><br />
                <Alert message={`当前日期：${date ? date.format('YYYY年MM月DD日') : '未选择'}`} type="info" />
                </div>
            </div>
            {contextHolder}
        </ConfigProvider>
    )
}

export default TableForm;